<template>
  <div class="m-tokendetail">
    <token-info :infos="TokenInfo"></token-info>

    <div class="token-tx-record table-shadow">
      <div class="head">
        <div class="tab">
          <span :class="{'active-tab':tab===0}" @click="tabChange(0)">{{$t('blockDetail.record')}}</span>
          <span :class="{'active-tab':tab===1}" @click="tabChange(1)">{{$t('tokenDetail.holder')}}</span>
        </div>
        <div class="search-box">
          <el-input
            size="small"
            :placeholder="$t('address.title')"
            v-model="searchAddress"
            class="adr-search"
            @keyup.enter.native="searchAdr"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchAdr(searchAddress)"></el-button>
          </el-input>
        </div>
      </div>
      <!-- Token交易 -->
      <token-tx
        v-if="tab===0"
        :isSearch="isSearch"
        :addr="propsAdr"
        :token="tokenName"
        :pages="pages"
        @clear="propsAdr=''"
      ></token-tx>
      <!-- Token持有人 -->
      <token-holder
        v-if="tab===1"
        :isSearch="isSearch"
        :addr="propsAdr"
        :totalHolder="TokenInfo.holders"
        :pages="pages"
        :infos="TokenInfo"
      ></token-holder>
    </div>

    <!-- 底部分页 -->
    <div class="bottom-page flex-right">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>

<script>
import TokenInfo from "./TokenInfos";
import TokenTx from "./TokenTx";
import TokenHolder from "./TokenHolder";
import PageContainer from "@/components/mobile/PageContainer.vue";
import TokenDetailBase from "@/mixins/TokenDetail/tokenDetail.js";
export default {
  mixins: [TokenDetailBase],
  components: {
    TokenInfo,
    TokenTx,
    TokenHolder,
    PageContainer
  }
};
</script>

<style lang="scss">
.m-tokendetail {
  padding: 15px 18px;
  .token-tx-record {
    margin-top: 30px;
    background: $white;
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    .head {
      // height: 47px;
      // padding: 0 25px;
      .tab {
        height: 100%;
        border-bottom: 1px solid #ececec;
        span {
          margin-left: 8px;
          display: inline-block;
          height: 100%;
          width: 72px;
          line-height: 47px;
          font-size: 14px;
          font-family: PingFangSC-Semibold;
          font-weight: 500;
          text-align: center;
          color: $black;
          cursor: pointer;
          transition: 0.5s;
        }
        span:last-child {
          margin-left: 30px;
          width: 65px;
        }
        .active-tab {
          color: $blue;
          border-bottom: 1px solid $blue;
        }
      }
      .search-box {
        text-align: center;
        background: #f9fafc;
      }
      .adr-search {
        width: 300px;
        margin: 10px auto 0;
        .el-input__inner {
          border-top-left-radius: 25px;
          border-bottom-left-radius: 25px;
        }
        .el-input-group__append {
          color: $white;
          background: $blue;
          border-top-right-radius: 25px;
          border-bottom-right-radius: 25px;
        }
      }
    }
  }
  .bottom-page {
    margin-top: 23px;
  }
}
</style>